<template>
	<view class="content">
		<view class="menu-block4 block">
			<view class="title" style="font-size: 36rpx;">
				{{detail.name}}
			</view>
			<view class="classify-tab-block menu-item">
				<view class="tab-content" style="flex-grow: 1;">
					<view class="district" v-for="item in imgList">
						<image class="img" :src="item"  @click="preview(item)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-block4 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					基地位置
				</view>
			</view>
			<view class="iphone-content" style="margin-bottom: 10rpx;">
				<view class="data" style="border-bottom: 1px solid #EEEEEE;">
					<view class="money-title">
						<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/address1.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.address}}
					</view>
				</view>
				<view class="iconfont">
					<image class="img" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/distance1.png"></image>
					<view class="play" style="text-align: center;">{{detail.distance}}km</view>
				</view>
			</view>
			<view class="iphone-content">
				<view class="data">
					<view class="money-title">
						<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/phone.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.phone}}
					</view>
				</view>
				<view class="iconfont" @click="callPhone(detail.phone)">
					<image class="img" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dial.png"></image>
					<view class="play" style="text-align: center;">拨打</view>
				</view>
			</view>
		</view>
		<view class="menu-block1 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					基本介绍
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iSinfo}">
					{{detail.baseIntroduction}}
				</view>
				<view class="text" @tap="showinfo" v-if="!iSinfo">【查看全部】</view>
			</view>
			<view class="text" @tap="showinfo" v-if="iSinfo" >收起</view>
		</view>
		<view class="menu-block1 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					入孵条件
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue}">
					{{detail.enterRule}}
				</view>
				<view class="text" @tap="showTrue" v-if="!iStrue">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue" v-if="iStrue" >收起</view>
		</view>
		<view class="menu-block1 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					入孵优惠条件
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue1}">
					{{detail.enterDiscountRule}}
				</view>
				<view class="text" @tap="showTrue1" v-if="!iStrue1">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue1" v-if="iStrue1" >收起</view>
		</view>
		<view class="menu-block3 block">
			<view class="top">
				<view class="title-top">
					<view class="tips"></view>
					<view class="title">
						评价 ({{count}})
					</view>
				</view>
				<view class="top-right" @click="navigate('/page_other/teacher/comment?id='+id+'&type='+type)">
					<view class="moreText">
						查看全部
					</view>
					<image class="more" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png"></image>
				</view>
			</view>
			<view class="middle" v-if="comment!=''">
				<view class="head">
					<image class="head-img" :src="comment[0].faveUrl"></image>
				</view>
				<view class="middle-right">
					<view class="middle-right-top">
						<view class="phone">
							{{comment[0].userName}}
						</view>
						<view class="score">
							<uni-rate v-model="comment[0].score" @change="onChange" :readonly="true"  active-color="red" :size="14"/>
						</view>
					</view>
					<view class="middle-right-middle">
						{{comment[0].content}}
					</view>
					<view class="middle-right-bottom">
						{{comment[0].createTime}}
					</view>
				</view>
			</view>
			<view class="" v-else style="margin: 40rpx auto;width: 150rpx;">
				暂无评价
			</view>
		</view>
		<view class="step" @click="navigate('/page_other/site/apply?id='+id)">
		<!-- <view class="step" @click="navigate1(detail)" v-if="skillTrain.length>0 && entrepreneurshipTrain.length>0"> -->
			入孵申请
		</view>
	</view>
</template>

<script>
	import {
		getUserIncubatorsById
	} from '@/api/site.js';
	import {
		getCommentByTypeList
	} from '@/api/teacher.js';
	export default {
		data() {
			return {
				id: null,
				iStrue: false,
				iSinfo: false,
				iStrue1: false,
				imgList:[],
				latitude: null,
				longitude: null,
				rateValue: 4,
				detail:{
					name:'2023年农房改造提升项目',
					data:'2012-12-12',
					address:'中国',
					distance:200,
					phone:19079110601,
					baseIntroduction:'为改善居住环境为改善居住环境为改善居住环境为改善居住环境，发挥资⾦效益，本次补助资⾦对象为“六类⼈员”、结对帮扶及经济困难的⼀般农⼾住房。采取农⼾⾃筹资⾦为主、政府予以适当补助的⽅式改造。保障对象：1.六类重点对象居住⽤房（窑）为',
					enterRule:'为改善居住环境，发挥资⾦效益，本次补助资⾦对象为“六类⼈员为改善居住环境，发挥资⾦效益，本次补助资⾦对象为“六类⼈员为改善居住环境，发挥资⾦效益，本次补助资⾦对象为“六类⼈员为改善居住环境，发挥资⾦效益，本次补助资⾦对象为“六类⼈员',
					enterDiscountRule:'为改善居住环境，发挥资⾦效益'
				},
				comment: [],
				count: 1,
				type: 1,
				
			}
		},
		methods: {
			onChange(e)
			{
			},
			preview(photoImage){
				let imgsArray = [];
				imgsArray[0] = photoImage
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			callPhone(e) {
				uni.makePhoneCall({
					phoneNumber: e,
					success() {
						console.log('拨打成功了');
					},
					fail() {
						console.log('拨打失败了');
					}
				})
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showTrue1() {
				this.iStrue1 = !this.iStrue1
			},
			showTrue() {
				this.iStrue = !this.iStrue
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			search() {
				this.more = true
				// this.getList(true)
			},
			getListDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserIncubatorsById({
					id:this.id,
					latitude:this.latitude,
					longitude:this.longitude
				}).then(data => {
					uni.hideLoading()
					this.detail = data
					this.imgList = this.detail.urlList
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getCommentByTypeList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getCommentByTypeList({
					page: 1,
					limit: 10,
					type: this.type,
					relationId: this.id,
					commentType: 1,
				}).then(data => {
					uni.hideLoading()
					this.count = data.count
					this.comment = data.list
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			this.id = e.id
			this.latitude = e.latitude
			this.longitude = e.longitude
			this.getListDetail()
			this.getCommentByTypeList()
		}
	}
</script>

<style lang="scss" scoped>
	.step{
		width: 350rpx;
		height: 100rpx;
		display: flex;
		background-color: red;
		color: #fff;
		margin: 30rpx auto;
		border-radius: 60rpx;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		right: 215rpx;
	}
	.title-top{
		display: flex;
		.tips{
			width: 18rpx;
			height: 32rpx;
			border-radius: 20rpx;
			background-color: #0256FF;
			margin: 16rpx 12rpx 0 0;
		}
		
		.title{
			font-weight: 900;
			font-size: 32rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			margin-bottom: 25rpx;
		}
		
	}
	.menu-block2 {
		width: 92%;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.text{
			line-height: 60rpx;
		}
		.item{
			margin: 13rpx 15rpx 0 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.skill-item{
				width: calc((100% -20rpx)/5);
				height: 65rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFE6E7;
				color: red;
				margin: 0 25rpx 25rpx 0;
			}
		}
		.skill{
			display: flex;
			flex: wrap;
		}
		.title{
			font-weight: 900;
			font-size: 40rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			margin-bottom: 25rpx;
		}
		.data{
			width: calc((100% - 150rpx));
			display:flex;
			color: #767676;
			font-size: 30rpx;
			// margin-top: 20rpx;
			color: #000;
			margin-top: 35rpx;
		}
		.count{
			margin: 7rpx 0 0 10rpx;
		}
		.project-content{
			line-height: 60rpx;
		}
		.iphone-content{
			display: flex;
			justify-content: space-between;
			.money-title{
				width: 50rpx;height: 50rpx;
			}
			.iconfont{
				width: 120rpx;
				
				.img{
					margin: 0 auto 10rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	.menu-block1 {
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.title{
			font-weight: 900;
			font-size: 32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
		}
		.data{
			display:flex;
			color: #767676;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
		.count{
			margin: 7rpx 0 0 10rpx;
		}
		.info {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
	
			view {
				text-align:justify ;
				font-size: 28rpx;
				line-height: 60rpx;
				word-break: break-word; //换行模式
				background-color: #fff;
			}
	
			.text {
				width: 95px;
				font-size: 30rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
				color: #FF0014;
				position: absolute;
				bottom: 30upx;
				right: 30upx;
				opacity: 1;
			}
		}
		.text {
			width: 95px;
			font-size: 30rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
			color: #FF0014;
			position: absolute;
			bottom: 15rpx;
			right: 30upx;
			opacity: 1;
		}
		.hide {
			overflow: hidden;
			word-break: break-word; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}
		
	}
	.menu-block3{
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		// margin-bottom: 50rpx;
		.top{
			width: 100%;
			height: 44px;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			.title{
				font-weight: 900;
				font-size: 32rpx;
				line-height: 60rpx;
				margin-bottom: 25rpx;
			}
			.top-right{
				display: flex;
				margin-top: 10rpx;
				.moreText{
					color: #999;
				}
				.more{
					width: 30rpx;
					height: 30rpx;
					color: #999;
					margin-top: 9rpx;
				}
			}
		}
		.middle{
			display: flex;
			width: 100%;
			.head{
				width: 20%;
				border-radius: 80rpx;
				.head-img{
					width: 100rpx;
					height: 100rpx;
					background-color: #999;
					border-radius: 80rpx;
				}
				
			}
			.middle-right{
				width: 80%;
				.middle-right-top{
					margin-top: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.phone{
						color: #000;
						font-size: 28rpx;
					}
					
				}
				.middle-right-middle{
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #1A1A1A;
					line-height: 48rpx;
				}
				.middle-right-bottom{
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #767676;
				}
			}
			
		}
	}
	.menu-block {
		display: flex;
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.img{
			position: relative;
			width: 70%;
			height: 400rpx;
			background-color: #F8F8F8;
			margin-right: 50rpx;
			margin-top: 30rpx;
			img{
				position: absolute;
				top: -30rpx;
				right: -30rpx;
				border-radius: 20rpx;
			}
		}
		.text{
			width: 230px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.line{
				width: 10rpx;
				height: 100rpx;
				background-color: #F4F4F4;
				margin: 20rpx 0;
			}
			.title{
				font-weight: 900;
				font-size: 40rpx;
				color: #000;
				margin-bottom: 25rpx;
			}
			.small-title{
				font-size: 30rpx;
				color: #767676;
				line-height: 45rpx;
				margin-bottom: 25rpx;
				image{
					width: 100%;
					height: 90rpx;
				}
			}
			
		}
	}
	.step{
		width: 350rpx;
		height: 100rpx;
		display: flex;
		background-color: red;
		color: #fff;
		margin: 30rpx auto;
		border-radius: 60rpx;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		right: 215rpx;
	}
	.menu-block4 {
		width: 92%;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.classify-tab-block {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-top: 20rpx;
		
			.tab-content {
				display: flex;
				flex-direction: row;
				overflow-x: scroll;
				.district{
					
					.img{
						width: 280rpx;
						height: 180rpx;
						border-radius: 10rpx;
						margin: 0 10rpx;
						// width: 100%;
						// height: 100%;
					}
				}
			
			}
		
		}
		.text{
			line-height: 60rpx;
		}
		.item{
			margin: 13rpx 15rpx 0 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.skill-item{
				width: calc((100% -20rpx)/5);
				height: 65rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFE6E7;
				color: red;
				margin: 0 25rpx 25rpx 0;
			}
		}
		.skill{
			display: flex;
			flex: wrap;
		}
		.title{
			font-weight: 900;
			font-size: 32rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			margin-bottom: 25rpx;
		}
		.data{
			width: calc((100% - 150rpx));
			display:flex;
			color: #767676;
			font-size: 28rpx;
			color: #1A1A1A;
			margin-top: 35rpx;
		}
		.count{
			width: calc((100% - 80rpx)/1);
			margin: 0 0 0 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin-bottom: 25rpx;
		}
		.project-content{
			line-height: 60rpx;
		}
		.iphone-content{
			display: flex;
			justify-content: space-between;
			.money-title{
				width: 44rpx;
				height: 42rpx;
			}
			.iconfont{
				width: 120rpx;
				
				.play{
					color: #767676;
					font-size: 28rpx;
				}
				
				.img{
					margin: 0 auto 10rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>